<!DOCTYPE html>
<html>

<head>
    <title>生成小程序图标</title>
    <style>
        .icon-container {
            display: inline-block;
            margin: 10px;
            text-align: center;
        }

        .icon {
            width: 64px;
            height: 64px;
            border: 1px solid #ccc;
            margin: 5px;
        }
    </style>
</head>

<body>
    <h2>小程序TabBar图标生成器</h2>

    <div class="icon-container">
        <h3>个人中心图标</h3>
        <canvas id="profile" width="64" height="64" class="icon"></canvas>
        <canvas id="profile-active" width="64" height="64" class="icon"></canvas>
    </div>

    <div class="icon-container">
        <h3>成绩单图标</h3>
        <canvas id="transcript" width="64" height="64" class="icon"></canvas>
        <canvas id="transcript-active" width="64" height="64" class="icon"></canvas>
    </div>

    <div class="icon-container">
        <h3>科研成果图标</h3>
        <canvas id="research" width="64" height="64" class="icon"></canvas>
        <canvas id="research-active" width="64" height="64" class="icon"></canvas>
    </div>

    <div class="icon-container">
        <h3>申请记录图标</h3>
        <canvas id="application" width="64" height="64" class="icon"></canvas>
        <canvas id="application-active" width="64" height="64" class="icon"></canvas>
    </div>

    <button onclick="downloadAll()">下载所有图标</button>

    <script>
        // 绘制个人中心图标
        function drawProfile(canvas, isActive) {
            const ctx = canvas.getContext('2d');
            const color = isActive ? '#4A90E2' : '#999999';

            ctx.clearRect(0, 0, 64, 64);
            ctx.fillStyle = color;

            // 头部
            ctx.beginPath();
            ctx.arc(32, 20, 8, 0, 2 * Math.PI);
            ctx.fill();

            // 身体
            ctx.beginPath();
            ctx.arc(32, 40, 12, 0, 2 * Math.PI);
            ctx.fill();
        }

        // 绘制成绩单图标
        function drawTranscript(canvas, isActive) {
            const ctx = canvas.getContext('2d');
            const color = isActive ? '#4A90E2' : '#999999';

            ctx.clearRect(0, 0, 64, 64);
            ctx.fillStyle = color;

            // 文档
            ctx.fillRect(16, 12, 32, 40);
            ctx.fillStyle = 'white';
            ctx.fillRect(20, 16, 24, 2);
            ctx.fillRect(20, 20, 20, 2);
            ctx.fillRect(20, 24, 24, 2);
            ctx.fillRect(20, 28, 18, 2);
        }

        // 绘制科研成果图标
        function drawResearch(canvas, isActive) {
            const ctx = canvas.getContext('2d');
            const color = isActive ? '#4A90E2' : '#999999';

            ctx.clearRect(0, 0, 64, 64);
            ctx.fillStyle = color;

            // 烧瓶
            ctx.beginPath();
            ctx.arc(32, 20, 8, 0, 2 * Math.PI);
            ctx.fill();

            ctx.fillRect(24, 28, 16, 20);
            ctx.fillRect(26, 48, 12, 4);
        }

        // 绘制申请记录图标
        function drawApplication(canvas, isActive) {
            const ctx = canvas.getContext('2d');
            const color = isActive ? '#4A90E2' : '#999999';

            ctx.clearRect(0, 0, 64, 64);
            ctx.fillStyle = color;

            // 文件夹
            ctx.fillRect(12, 20, 40, 28);
            ctx.fillRect(12, 16, 20, 8);
        }

        // 下载画布为PNG
        function downloadCanvas(canvas, filename) {
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL();
            link.click();
        }

        // 下载所有图标
        function downloadAll() {
            downloadCanvas(document.getElementById('profile'), 'profile.png');
            downloadCanvas(document.getElementById('profile-active'), 'profile-active.png');
            downloadCanvas(document.getElementById('transcript'), 'transcript.png');
            downloadCanvas(document.getElementById('transcript-active'), 'transcript-active.png');
            downloadCanvas(document.getElementById('research'), 'research.png');
            downloadCanvas(document.getElementById('research-active'), 'research-active.png');
            downloadCanvas(document.getElementById('application'), 'application.png');
            downloadCanvas(document.getElementById('application-active'), 'application-active.png');
        }

        // 初始化所有图标
        window.onload = function () {
            drawProfile(document.getElementById('profile'), false);
            drawProfile(document.getElementById('profile-active'), true);
            drawTranscript(document.getElementById('transcript'), false);
            drawTranscript(document.getElementById('transcript-active'), true);
            drawResearch(document.getElementById('research'), false);
            drawResearch(document.getElementById('research-active'), true);
            drawApplication(document.getElementById('application'), false);
            drawApplication(document.getElementById('application-active'), true);
        };
    </script>
</body>

</html>
